@import "variables";

video-item{
  .collect-item{

    margin:0 pxTorem(30);
    padding: pxTorem(30) 0;
    border-bottom: 1px solid color($h5,c9);
    .img-box{
      display: flex;
      align-items: center;
      margin-top: pxTorem(30);
      p{
        width: 100%;
        height: pxTorem(396);
        background-size:cover !important;
        position: relative;
        video{
          width: 100%;
        }
        img.play-icon{
          position: absolute;
          width: 18%;
          top:37%;
          left:41%;
        }
        span{
          position: absolute;
          bottom:pxTorem(30);
          line-height: pxTorem(40);
          right:pxTorem(40);
          color:#fff;
          text-align: center;
        }
        span.video{
          width:pxTorem(110);
          height:pxTorem(40);
          border-radius: pxTorem(20);
          background: rgba(0,0,0,0.5);

        }
        span.online{
          width:pxTorem(124);
          height:pxTorem(40);
          background: #E94141;
          border-radius: pxTorem(4);
          img{
            display: inline-block;
            width: pxTorem(25);
            line-height: pxTorem(40);
            margin-right: pxTorem(6);
          }
        }
      }

    }
    .word-box {
      flex: 1;
      font-size: pxTorem(30);
      line-height: pxTorem(45);
      .title{
        width: 100%;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
    }
    .bottom-box{
      display: flex;
      align-items: center;
      color:color($h5 ,c4);
      font-size: pxTorem(24);
      margin-top: pxTorem(30);
      p:first-child{
        width: 60%;
       display: flex;
        align-items:center;
        span{
          display: block;
          flex: 1;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
        }
      }
      p:last-child{
        width: 40%;
        text-align: right;
      }
    }
  }
}
